<template>
  <div ref="info" class="box-card">
    <i class="el-icon-close closeRight" @click.stop="clearJumpId" />
    <div class="head-box-card padding20 clearfix">
      <el-row v-if="showInfo" class="top_cus_info">
        <el-col :span="18">
          <el-col :span="8">
            <p>标题</p>
            <p>{{ initData.tittle }}</p>
          </el-col>
          <el-col :span="8">
            <p>应用范围</p>
            <p>{{ getApplicationRange(initData.applicationRange) }}</p>
          </el-col>
          <el-col :span="8">
            <p>投放位置</p>
            <p>{{ getLayoutPosition(initData.layoutPosition) }}</p>
          </el-col>
        </el-col>
        <el-col :span="6">
          <el-button type="primary" @click="jumpId">编 辑</el-button>
        </el-col>
      </el-row>
    </div>
    <div class="height3" />
    <div v-if="showInfo" class="padding20">
      <el-tabs v-model="activeName">
        <el-tab-pane label="广告详情" name="first">
          <div class="infoBox">
            <el-col :span="12">标题：{{ initData.tittle }}</el-col>
            <el-col :span="12">应用范围：{{ getApplicationRange(initData.applicationRange) }}</el-col>
            <el-col :span="12">投放位置：{{ getLayoutPosition(initData.layoutPosition) }}</el-col>
            <el-col :span="12">轮播顺序：{{ initData.sort }}</el-col>
            <el-col :span="12">广告类型：{{ getAdvertisingType(initData.advertisingType) }}</el-col>
            <el-col
              :span="24"
            >投放时间：{{ initData.startTime }} {{ initData.startTime && initData.endTime ?"至":'暂未设置投放时间' }} {{ initData.endTime }}</el-col>
            <el-col
              :span="12"
            >{{ getAdvertisingType(initData.advertisingType) }}名称：{{ getId(initData.dataId) }}</el-col>
            <el-col :span="24">
              标签：
              <el-tag
                v-for="tag in initData.label ? JSON.parse(initData.label) :[]"
                :key="tag.id"
                :style="{color:'#'+tag.color}"
                :disable-transitions="false"
                @click="pushArr(tag)"
              >{{ tag.label }}</el-tag>
            </el-col>
            <el-col :span="24">是否上架：{{ initData.status ? "已上架" :'暂未上架' }}</el-col>
            <el-col :span="24">广告备注：{{ initData.remark ?initData.remark:'暂未设置备注' }}</el-col>
          </div>
        </el-tab-pane>
        <el-tab-pane label="广告图片" name="second">
          <el-col :span="24">
            <img :src="photo" alt >
          </el-col>
        </el-tab-pane>
      </el-tabs>
    </div>
    <!-- <el-row v-loading="loading" class="padding20"></el-row> -->
  </div>
</template>
<script>
import mmUrl from '~/utils/utilUrl';
import { createDics } from '~/utils/util';
export default {
  props: ['id', 'pageHeight', 'updateRight'],
  data() {
    return {
      showInfo: false,
      loading: true,
      activeName: 'first',
      initData: {
        advertisingType: '',
        applicationRange: '',
        automaticId: 0,
        dataId: '',
        endTime: '',
        label: '',
        layoutPosition: '',
        remark: '',
        sort: 0,
        startTime: '',
        status: false,
        tittle: '',
        CEtimer: []
      },
      photo: '',
      resultDics: {},
      courseDTOS: [],
      lives: [],
      projectDTOs: [],
      advertisingTypeArr: [
        {
          value: 0,
          label: '商机'
        },
        {
          value: 1,
          label: '直播'
        },
        {
          value: 2,
          label: '课程'
        }
      ]
    }
  },
  watch: {
    id() {
      this.getInitData()
    },
    updateRight() {
      this.getInitData()
    }
  },
  mounted() {
    this.getInitData()
  },
  methods: {
    clearJumpId() {
      this.$emit('clearJumpId')
    },
    jumpId() {
      this.$emit('editor')
    },
    getId(res) {
      return this.initData.advertisingType == 0
        ? this.projectDTOs.filter(v => v.id === res).length
          ? this.projectDTOs.filter(v => v.id === res)[0].projectName
          : '数据错误，请联系管理员'
        : this.initData.advertisingType == 1
          ? this.lives.filter(v => v.id === res).length
            ? this.lives.filter(v => v.id === res)[0].tittle
            : '数据错误，请联系管理员'
          : this.courseDTOS.filter(v => v.id === res).length
            ? this.courseDTOS.filter(v => v.id === res)[0].name
            : '数据错误，请联系管理员';
    },
    getAdvertisingType(res) {
      return this.advertisingTypeArr.filter(v => v.value == res)[0].label
    },
    getApplicationRange(res) {
      return this.resultDics.APPLICATION_RANGE.children.filter(
        v => v.dicCode === res
      )[0].dicName
    },
    getLayoutPosition(res) {
      return this.initData.applicationRange === 'Advertising_APP'
        ? this.resultDics.LAYOUT_POSITION_APP.children.filter(
          v => v.dicCode === res
        )[0].dicName
        : this.resultDics.LAYOUT_POSITION_WEB.children.filter(
          v => v.dicCode === res
        )[0].dicName
    },
    getInitData() {
      this.$post({
        url: mmUrl.advertising.loadedit,
        data: {
          id: this.$props.id
        }
      }).then(res => {
        if (this.$props.id !== 'create') {
          this.initData = res.item
          let result = res.item.applicationRange
          this.getFilePhtot(
            result === 'Advertising_WEB'
              ? 'IMAGE_ADVERTISING_FILE_WEB_CAROUSEL'
              : 'IMAGE_ADVERTISING_FILE_APP_CAROUSEL'
          )
        }
        this.courseDTOS = res.courseDTOS
        this.lives = res.lives
        this.projectDTOs = res.projectDTOs
        this.resultDics = createDics(res.dics, 'dicCode')
        this.loading = false
        this.showInfo = true
        this.$nextTick(() => {
          this.$refs['info'].style.height = this.$props.pageHeight + 'px';
        })
      })
    },
    getFilePhtot(res) {
      this.$post({
        url: mmUrl.file.getfiles,
        data: {
          dataId: this.$props.id,
          typeCode: res
        }
      }).then(res => {
        this.photo = res.length ? res[0].fileUrl : '';
      })
    }
  }
}
</script>

<style lang='scss'>
.infoBox {
  font-weight: 500;
  font-size: 14px;
  div {
    min-height: 50px;
  }
}
img {
  vertical-align: top;
  max-width: 480;
  max-height: 360px;
}
</style>
